<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body>
		<table id="table">
			<tr>
				<td>id</td>
				<td>年级名称</td>
			</tr>
			<tr v-for="grade in list">
				<td v-text="grade.gradeId"></td>
				<td v-text="grade.gradeName"></td>
			</tr>
		</table>
	</body>

</html>
<script>
	new Vue({
		el: '#table',
		data: {
			list: []
		},
		created: function() {　　　　　　 //为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
			var self = this;
			$.ajax({
				url: 'http://127.0.0.1:8080/demo/queryAllGrade',
				type: 'get',
				data: {},
				dataType: 'json'
			}).then(function(res) {
				console.log(res);　　　　　　　　　　 //把从json获取的数据赋值给数组
				self.list = res;
			}).fail(function() {
				console.log('失败');
			})
		}
	})
</script>